<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Title</title>
</head>
<body>
<div class="col-sm-12">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <table class="table form-table margin-bottom10">
                <tr>
                    <td>
                        <input type="text" name="roleName"
                               th:value="${#maps.containsKey(filters, 'roleName')} ? ${filters.roleName} : ''"
                               placeholder="角色名称" class="input-sm form-control"/>
                    </td>
                </tr>
            </table>
            <div>
                <input type="text" name="pageNum" id="pageNum" th:value="${page.pageNum}"/>
                <input type="text" name="pageSize" id="pageSize" th:value="${page.pageSize}"/>
                <button type="button" class="btn btn-sm btn-primary"
                        onclick="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">搜索
                </button>
                <button type="button" class="btn btn-sm btn-primary create">新增</button>
                <button type="button" id="loading-example-btn" onclick="javascript:window.location.reload();"
                        class="btn btn-white btn-sm">刷新
                </button>
            </div>
            <table class="table table-striped table-bordered table-hover dataTables-example">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>角色名称</th>
                    <th>角色编码</th>
                    <th>描述</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr class="gradeX" th:each="item,it : ${page.list}">
                    <td class="text-center" th:text="${it.count}">11</td>
                    <td th:text="${item.roleName}">22</td>
                    <td th:text="${item.roleCode}">33</td>
                    <td th:text="${item.description}">33</td>
                    <td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}">33</td>
                    <td class="text-center">
                        <a class="edit" th:attr="data-id=${item.id}">修改</a>
                        <a class="delete" th:attr="data-id=${item.id}">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="row">
                <div class="col-sm-6">
                    <div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite"
                         aria-relevant="all">显示
                        <span th:text="${page.startRow}"></span> 到 <span th:text="${page.endRow}"></span> 项，共 <span
                                th:text="${page.total}"></span> 项
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
                        <ul class="pagination">
                            <!--如果不是第一页,则可以跳转到第一页-->
                            <li class="paginate_button previous" th:if="${!page.isFirstPage}">
                                <a href="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">首页</a>
                            </li>
                            <!--如果是第一页,则不能点-->
                            <li class="paginate_button previous" th:if="${page.isFirstPage}">
                                <a href="javascript:void(0)">首页</a>
                            </li>
                            <!--如果不是第一页,则可以点击上一页-->
                            <li class="paginate_button previous" th:if="${!page.isFirstPage}">
                                <!--<a th:href="'javascript:document.forms.ec.pageNum.value='+${page.prePage}+';document.forms.ec.submit();'">上一页</a>-->
                                <a th:href="|javascript:document.forms.ec.pageNum.value=${page.prePage};document.forms.ec.submit();|">上一页</a>
                            </li>
                            <!--如果是第一页,则不能跳转到上一页-->
                            <li class="paginate_button previous disabled" aria-controls="DataTables_Table_0"
                                tabindex="0"
                                id="DataTables_Table_0_previous" th:if="${page.isFirstPage}">
                                <a href="javascript:void(0)">上一页</a>
                                <!--中间导航栏-->
                            <li th:each="i : ${page.navigatepageNums}"
                                th:class="${i == page.pageNum} ? 'paginate_button active' : 'paginate_button'">
                                <a th:href="|javascript:document.forms.ec.pageNum.value=${i};document.forms.ec.submit()|">
                                    <span th:text="${i}"></span>
                                </a>
                            </li>
                            <!--如果不是最后一页,则可以点击下一页-->
                            <li class="paginate_button next" aria-controls="DataTables_Table_0" tabindex="0"
                                id="DataTables_Table_0_next" th:if="${!page.isLastPage}">
                                <a th:href="|javascript:document.forms.ec.pageNum.value=${page.nextPage};document.forms.ec.submit()|">下一页</a>
                            </li>
                            <!--如果是最后一页,则不可以点击下一页-->
                            <li class="paginate_button next disabled" th:if="${page.isLastPage}">
                                <a href="javascript:void(0)">下一页</a>
                            </li>
                            <!--如果是不是最后一页,则可以点击尾页-->
                            <li class="paginate_button next" th:if="${!page.isLastPage}">
                                <a th:href="|javascript:document.forms.ec.pageNum.value=${page.pages};document.forms.ec.submit()|">尾页</a>
                            </li>
                            <!--如果是最后一页,则不可以点击尾页-->
                            <li class="paginate_button next" th:if="${page.isLastPage}">
                                <a href="javascript:void(0)">尾页</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>